<template>
  <div>
    <!-- 样式配置 -->
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <Common></Common>
        <!-- 数据配置 -->
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form label-width="70px" label-position="left">
          <el-form-item label="标题名称:">
            <el-input
              v-model="modelItem.data.title"
              type="text"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <div
            v-for="(item, index) in modelItem.data.LIST"
            :key="index"
            class="skill-list"
          >
            <el-form-item :label="`技能${index + 1}:`">
              <el-input
                v-model="item.introduce"
                type="textarea"
                show-word-limit
                :rows="4"
              />
              <el-button
                :disabled="index === 0"
                type="danger"
                :icon="SemiSelect"
                circle
                @click="deleteSkill(index)"
              />
              <el-button
                :disabled="index !== modelItem.data.LIST.length - 1"
                type="primary"
                :icon="Plus"
                circle
                @click="addSkill"
              />
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Common from '@/options/Common.vue'
import { Plus, SemiSelect } from '@element-plus/icons-vue'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
const activeName = ref('first')

// 删除技能
const deleteSkill = (index: number): void => {
  modelItem.data.LIST.splice(index, 1)
}
// 添加技能
const addSkill = (): void => {
  modelItem.data.LIST.push({
    skillName: 'JavaScript', // 技能名称
    proficiency: '熟悉', // 熟练度
    introduce: '熟练掌握该项技术', // 介绍
  })
}
</script>
<style lang="scss" scoped>
.skill-list {
  .el-button {
    margin-left: 10px;
  }
}
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}
:deep(.el-tabs--border-card) {
  border: 0;
}
/* 日期选择器 */
:deep(.el-range-editor.el-input__wrapper) {
  width: 200px;
}
</style>
